<template>
  <GcTable
    v-loading="loading"
    v-model:searchKeywords="searchKeywords"
    :pagination="pagination"
    :columns="ARTICLE_MANAGE_COLUMNS"
    :tableData="tableData"
    :filterList="filterList"
    :defaultFilter="defaultFilter"
    searchPlaceholder="请输入文章标题/所属用户昵称进行搜索"
    @current-change="handlerCurrentChange"
    @search="handlerSearch"
    @get-search-params="getSearchParams"
    @reset-fileds="resetSearchParams">
    <template #category="{ row }">
      <span>
        {{ categoryMap[row.category] }}
      </span>
    </template>
    <template #tag="{ row }">
      <el-tag
        v-for="(item, idx) in row.tag.split(';')"
        :type="tagTypes[idx]"
        :key="item"
        size="small">{{ tagNameMap[item] || item }}</el-tag>
    </template>
    <template #coverImage="{ row }">
      <el-image
        v-if="row.coverImage"
        :z-index="999999"
        preview-teleported
        style="width: 100%; height: 32px"
        :src="row.coverImage"
        :zoom-rate="1.2"
        :preview-src-list="[row.coverImage]"
        fit="cover"
      />
    </template>
    <template #status="{ row }">
      <span
        :class="[row.status === '2' ? 'text-success' : row.status === '3' ? 'text-error' : 'text-ready']">
        {{ statusMap[row.status] }}
      </span>
    </template>
    <template #operate="{ row }">
      <div class="operate-btn-group center">
        <gc-icon-button
          v-permission="'article-manage-permission:btn:delete'"
          type="link" @click="handleCommand(row.id, 'delete')">删除</gc-icon-button>
        <gc-icon-button
          v-if="row.status === '1'"
          type="link"
          v-permission="'article-manage-permission:btn:approve'"
          @click="handleCommand(row.id, 'approve')">审核</gc-icon-button>
        <gc-icon-button
          v-if="row.status !== '1'"
          v-permission="'article-manage-permission:btn:approve-again'"
          type="link"
          @click="handleCommand(row.id, 'reapprove')">重新审核</gc-icon-button>
      </div>
    </template>
  </GcTable>
  <ApproveArticle
    v-if="approveVisible"
    @close-modal="closeModal"
    :id="currentArticleId"
    :isAgain="isReapprove" />
</template>

<script setup lang="ts" name="ArticleManage">
import { ref, reactive } from 'vue'
import { ARTICLE_MANAGE_COLUMNS } from './const'
import usePagination from '@/hooks/usePagination'
import type { Article } from '@/http/type'
import type { Pagination } from '@/@type'
import { apiGetArticleList, apiDeleteArticle } from '@/http/service'
import { ElMessageBox, ElMessage } from 'element-plus'
import ApproveArticle from './components/ApproveArticle.vue'
import { tagNameMap } from '@/config'

interface ResponseArticle extends Pagination {
  dataList: Array<Article>
}
interface AdvanceSearch {
 status: string
}
const tagTypes = ['success', null, 'warning', 'danger']
const statusMap = {
  1: '待审核',
  2: '审核通过',
  3: '审核不通过'
} as any
const categoryMap = {
  1: '生活分享',
  2: '代码人生',
  3: '游戏',
  4: '旅游攻略',
  5: 'UI设计'
} as any
const isReapprove = ref(false)
const { pagination, loading } = usePagination()
const tableData = ref<Array<Article>>([])
const searchKeywords = ref('')
const approveVisible = ref(false)
const currentArticleId = ref<number>()
const filterList = [
  {
    name: '状态',
    key: 'status',
    type: 'select' as const,
    placeholder: '请选择文章状态',
    options: [
      { value: '1', label: '待审核' },
      { value: '2', label: '审核通过' },
      { value: '3', label: '审核不通过' }
    ]
  }
]
const defaultFilter = reactive<AdvanceSearch>({
  status: ''
})

/**
 * 文章列表查询
 */
async function findArticleList () {
  const searchParams = {
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    searchKeywords: searchKeywords.value,
    ...defaultFilter
  }
  loading.value = true
  try {
    const { dataList, ...pageInfo } = await apiGetArticleList<ResponseArticle>(searchParams)
    tableData.value = dataList
    Object.assign(pagination, pageInfo)
  } catch (error) {
    tableData.value = []
  } finally {
    loading.value = false
  }
}
findArticleList()

async function handleCommand (id: number, comamnd: 'delete' | 'approve' | 'reapprove') {
  currentArticleId.value = id
  if (comamnd === 'delete') {
    await ElMessageBox.confirm(
      '删除文章后将无法恢复，确认删除？',
      '提示',
      { type: 'warning' }
    )
    await apiDeleteArticle(id)
    ElMessage.success('删除文章成功')
    findArticleList()
  } else if (comamnd === 'approve' || comamnd === 'reapprove') {
    approveVisible.value = true
    isReapprove.value = comamnd === 'reapprove'
  }
}

function handlerSearch () {
  pagination.pageNo = 1
  findArticleList()
}

function handlerCurrentChange (val: number) {
  pagination.pageNo = val
  findArticleList()
}

function getSearchParams (searchParams: AdvanceSearch) {
  Object.assign(defaultFilter, searchParams)
  findArticleList()
}

function resetSearchParams (searchParams: AdvanceSearch) {
  searchKeywords.value = ''
  Object.assign(defaultFilter, searchParams)
  findArticleList()
}

function closeModal (update?: boolean) {
  if (update) {
    findArticleList()
  }
  approveVisible.value = false
}
</script>

<style lang="scss" scoped>
.el-tag {
  :deep(.el-tag__content) {
    font-size: 12px;
  }
  & + .el-tag {
    margin-left: 4px;
  }
}
</style>
